<template>
  <div class="login-container">

    <div class="login-box-mobile" v-if="device === 'mobile'">
      <div class="mobile-title-lab">欢迎使用慧聊AI</div>
      <div class="login-input-lab marginleft">手机号:</div>
        <div class="login-input-box">
          <div class="area-sele">
            <el-select v-model="value2" placeholder="+86" @change="selectValue">
              <el-option v-for="(item, index) in countryList" :key="item.areaCode" :label="'+' + item.areaCode"
                :value="'+' + item.areaCode">
                <span>{{ "+" + item.areaCode + item.name }}</span>
              </el-option>
            </el-select>
          </div>
          <div class="line-shu">|</div>
          <el-input type="text" placeholder="请输入手机号" v-model="phoneNum" maxlength="15"
            oninput="value=value.replace(/[^0-9]/g,'')">
          </el-input>



        </div>

        <div class="login-input-lab marginleft">图形验证码:</div>
        <div class="login-input-box">
          <el-input type="text" placeholder="请输入图形验证码" v-model="imgCode" maxlength="6">
          </el-input>

          <img :src="picCodeImg" class="img-code" @click="changeCode">

        </div>

        <div class="login-input-lab marginleft">短信验证码:</div>
        <div class="login-input-box">

          <el-input type="text" placeholder="请输入短信验证码" v-model="vCode" maxlength="6"
            oninput="value=value.replace(/[^0-9]/g,'')">
          </el-input>

          <p class="p-vcode" @click="getVcode">{{ vcodeCount }}</p>

        </div>

        <el-button type="primary" :loading="btnloading" :disabled="!(phoneNum && imgCode && vCode)"
          @click="loginBtn">登录/注册</el-button>
        <div class="tip">
          登录/注册即表示同意
          <span style="color: #226CFF; cursor: pointer;" @click="jumbXieyi">《用户服务协议》</span>
        </div>



    </div>
    <div class="login-box-desk" v-else>

      <img src="https://cdn.shhd.info/APP/sys_img/digitalEmployee/customer.png" class="login-left-img" />
      <div class="login-right">
        <div class="login-title-lab">欢迎使用慧聊AI</div>
        <div class="login-input-lab">手机号:</div>
        <div class="login-input-box">
          <div class="area-sele">
            <el-select v-model="value2" placeholder="+86" @change="selectValue">
              <el-option v-for="(item, index) in countryList" :key="item.areaCode" :label="'+' + item.areaCode"
                :value="'+' + item.areaCode">
                <span>{{ "+" + item.areaCode + item.name }}</span>
              </el-option>
            </el-select>
          </div>
          <div class="line-shu">|</div>
          <el-input type="text" placeholder="请输入手机号" v-model="phoneNum" maxlength="15"
            oninput="value=value.replace(/[^0-9]/g,'')">
          </el-input>



        </div>

        <div class="login-input-lab">图形验证码:</div>
        <div class="login-input-box">
          <el-input type="text" placeholder="请输入图形验证码" v-model="imgCode" maxlength="6">
          </el-input>

          <img :src="picCodeImg" class="img-code" @click="changeCode">

        </div>

        <div class="login-input-lab">短信验证码:</div>
        <div class="login-input-box">

          <el-input type="text" placeholder="请输入短信验证码" v-model="vCode" maxlength="6"
            oninput="value=value.replace(/[^0-9]/g,'')">
          </el-input>

          <p class="p-vcode" @click="getVcode">{{ vcodeCount }}</p>

        </div>

        <el-button type="primary" :loading="btnloading" :disabled="!(phoneNum && imgCode && vCode)"
          @click="loginBtn">登录/注册</el-button>
        <div class="tip">
          登录/注册即表示同意
          <span style="color: #226CFF; cursor: pointer;" @click="jumbXieyi">《用户服务协议》</span>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import common from "@/common/js/common.js"
import { codesV3, checkCode } from "@/api/aiworker.js";

export default {
  name: 'Login',
  data () {
    return {
      count: 0,
      codeKey: '',
      phoneNum: "",
      timer:null,
      timeStamp: "",
      imgCode: '',
      picCodeImg: '',
      vCode: "",
      vcodeCount: "获取验证码",
      btnloading: false,
      value2: '+86',
      countryList: [
        { name: "中国 (China)", areaCode: "86" },
        { name: "中国香港 (Hong Kong)", areaCode: "852" },
        { name: "中国澳門 (Macau)", areaCode: "853" },
        { name: "中国台湾 (Taiwan)", areaCode: "886" },
        { name: "日本 (Japan)", areaCode: "81" },
        { name: "韩国 (South Korea)", areaCode: "82" },
        { name: "美国/加拿大 (USA or Canada)", areaCode: "1" },
        { name: "马来西亚 (Malaysia)", areaCode: "60" },
        { name: "新加坡 (Singapore)", areaCode: "65" },
        { name: "澳大利亚 (Australia)", areaCode: "61" },
        { name: "奥地利 (Austria)", areaCode: "43" },
        { name: "法国 (France)", areaCode: "33" },
        { name: "西班牙 (Spain)", areaCode: "34" },
        { name: "英国 (United Kingdom)", areaCode: "44" },
      ],
      device:'',

    }
  },


  methods: {
    jumbXieyi () {
      window.open('https://swplus.shhd.info/hls/www/hdStatic/page/policy.html');

    },

    changeCode () {

      this.timeStamp = new Date().getTime() + "" + Math.floor(Math.random() * 100000 + 1);
      this.picCodeImg = 'https://swplus.shhd.info/api-s/official-anon/createVerifyCode?key=' + this.timeStamp;
    },

    getVcode () {
      if (this.vcodeCount === '获取验证码' || this.vcodeCount === '重新获取') {
        if (common.isStringEmpty(this.phoneNum)) {
          this.$message('请输入手机号');
          return;
        }
        if (common.isStringEmpty(this.imgCode)) {
          this.$message('请输入图形验证码');
          return;
        }
        const TIME_COUNT = 45;
        if (!this.timer) {
          console.log("倒计时");
          this.count = TIME_COUNT;
          codesV3(this.phoneNum, this.value2.substr(1), this.timeStamp, this.imgCode)
            .then((result) => {
              console.log(result);
              if (!common.isStringEmpty(result.key)) {
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= 45) {
                    this.count--;
                    this.vcodeCount = this.count + "秒后重试";
                  } else {

                    clearInterval(this.timer);
                    this.timer = null;
                    this.vcodeCount = "获取验证码";
                  }
                }, 1000);
                this.codeKey = result.key;
              } else {
                this.$message.error(result.message);
              }
            })
            .catch((err) => {
              clearInterval(this.timer);
              this.timer = null;
              this.vcodeCount = "获取验证码";

              this.$message.error('获取验证码失败');

            });
        }


      }
    },

    loginBtn () {
      if (common.isStringEmpty(this.phoneNum)) {
        this.$message('请输入手机号');
        return;
      }
      if (common.isStringEmpty(this.vCode)) {
        this.$message('请输入短信验证码');
        return;
      }
      this.btnloading = true;
      checkCode(this.phoneNum, this.vCode, this.codeKey).then((res) => {
        this.btnloading = false;
        if (res.code == 200) {
          console.log(res);
          this.$localstore.set(
            "hdUserId",
            res.data.loginUser.id
          );
          this.$localstore.set(
            "access_token",
            res.data.access_token
          );
          this.$localstore.set(
            "nickname",
            res.data.loginUser.nickname
          );
          this.$localstore.set(
            "headImgUrl",
            res.data.loginUser.headImgUrl
          );
          this.$router.push({ path:'/' })

        } else {

          if (!common.isStringEmpty(res.message)) {
            this.$message(res.message);
          }

        }
      }).catch((err) => {
        this.btnloading = false;
        if (!common.isStringEmpty(JSON.stringify(err))) {
          this.$message(JSON.stringify(err.message));
        }
      });
    },


    selectValue (s) {

      //      this.value2 = s;


      console.log(s);

    }
  },
  mounted () {
    this.timeStamp = new Date().getTime() + "" + Math.floor(Math.random() * 100000 + 1);
    this.picCodeImg = 'https://swplus.shhd.info/api-s/official-anon/createVerifyCode?key=' + this.timeStamp;

    if (document.body.getBoundingClientRect().width - 1 < 992) {
      this.device = 'mobile'
    } else { 
      this.device = 'desktop'
    }
   
    console.log(this.device);
  },
}
</script>

<style scoped>
/* reset element-ui css */
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #283443;

}

.login-box-desk {
  display: flex;
  width: 828px;
  height: 528px;
  background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
  border-radius: 14px 14px 14px 14px;
}

.login-left-img {
  width: 308px;
  height: 528px;
}

.login-right {
  display: flex;
  flex-direction: column;
  padding-left: 70px;
  padding-right: 70px;
  width: 520px;
  height: 528px;
}

.login-title-lab {
  font-size: 30px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #000000;
  line-height: 30px;
  margin-top: 52px;
  margin-bottom: 12px;
}

.login-input-lab {
  font-size: 14px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #000000;
  line-height: 14px;
  margin-top: 18px;
}

.login-input-box {
  display: flex;

  width: 100%;
  height: 51px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  margin-top: 8px;
  border: 1px solid #E1EBF6;
}


.login-container /deep/ .el-button {
  width: 380px;
  height: 51px;
  background: #226CFF;
  border-radius: 10px 10px 10px 10px;
  font-size: 16px;
  font-weight: 600;
  margin-top: 30px;
}

/deep/.el-button--primary.is-disabled,
.el-button--primary.is-disabled:active,
.el-button--primary.is-disabled:focus,
.el-button--primary.is-disabled:hover {

  background-color: #a0cfff;
  border-color: #a0cfff;
}

.tip {
  font-size: 12px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: rgba(0, 0, 0, .4);
  line-height: 12px;
  margin-top: 16px;
  align-self: center;
}

.login-input-box /deep/.el-dropdown-menu__wrapper {
  max-height: 200px;
  overflow: hidden;
}

.area-sele {
  width: 68px;
  height: 100%;
}

.area-sele /deep/ .el-input__inner {

  height: 49px;
  line-height: 49px;
  font-size: 14px;
  color: #000000;
  border: 0;
  padding-left: 8px;
  padding-right: 0px;

}

.area-sele /deep/ input::-webkit-input-placeholder {

  color: #000000;

}

/deep/.el-icon-arrow-up:before {}

.area-sele /deep/ .el-select .el-input .el-input__suffix {
  right: 1px;
  color: #000 !important;
}

/deep/ .el-select__caret {
  color: #000000;
}

.area-sele /deep/ .el-input__inner:focus {
  line-height: 51px;
}

.area-sele /deep/ .el-input__inner:focus {

  outline: 0;
}

.area-sele /deep/ .el-input__inner:focus {
  border-color: #409EFF;
  outline: 0;
}

.line-shu {
  width: 1px;
  height: 15px;
  margin-top: 15px;
  color: rgba(0, 0, 0, 0.2);


}


/**改变input里的字体颜色*/
/deep/ input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.4);
  font-size: 16px;
}

/deep/ .el-input__inner {

  height: 49px;
  line-height: 49px;
  font-size: 16px;
  background-color: #ffffff;
  border: 0;
  color: #000000;

}

/deep/ .el-input__inner:focus {

  outline: 0;
}

.img-code {

  height: 49px;
}

.p-vcode {
  width: 87px;
  font-size: 13px;
  font-family: PingFang SC-Regular, PingFang SC;
  font-weight: 400;
  color: #226CFF;
  line-height: 13px;
  margin-right: 18px;
  margin-top: 18px;
  cursor: pointer;
}



/* 移动端 */
.login-box-mobile{

  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(180deg, #E9F6FF 0%, #FFFFFF 100%);
  border-radius: 14px 14px 0px 0px;
  width: 100%;
  height: 500px;
 
  align-self: flex-end;
}
.mobile-title-lab{

  font-size: 21px;
font-family: PingFang SC-Medium, PingFang SC;
font-weight: 600;
color: #000000;
line-height: 21px;
margin-top: 30px;

}
.marginleft{
  margin-left: 10px;
  align-self: flex-start;
}
.mobi-input-box {
  display: flex;

  width: 380px;
  height: 51px;
  background: #FFFFFF;
  border-radius: 8px 8px 8px 8px;
  margin-top: 8px;
  border: 1px solid #E1EBF6;
}
</style>

